- 综合排序
- 最热优先
- 最新优先
- 来自专栏河湾欢儿的专栏
响应式布局rem布局
我们做的h5页面只能在移动端访问（rem不兼容低级版本浏览器） 第一步：从UI设计师拿到设计稿（psd） 640*1136 第二部：在样式中给HTML一个fontSize值，我们一般都给一个比较好算的值 在这里我们之所有用100px,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差 html{ font-size: 100px;/*1rem=100px*/ 写样式 完全按照设计尺寸来写样式，不管任何事情，设计稿给你的宽度，高度字体大小、margin、padding的值是多少，我们就写多少 但是我们在写样式的时候，需要把得到的像素值除以100，计算出对应的rem 值，我们设定的也都是rem的值 （值得注意点的是外层盒子的宽度我们一般还是不写固定值，沿用流式布局的思想） 第四步：根据当前屏幕的宽度和设计稿的宽度来计算我们的HTML的fontSize的值 设计稿 n=winW/desW; document.documentElement.style.fontSize=n*100+'px'; }(); jd移动布局
2.3K10发布于 2018-09-06 - 来自专栏技术社区
rem 布局原理
rem：相对于根元素(即 html 元素)font-size 计算值的倍数。 通俗的说，1rem = html 的 font-size 值 这段代码。 html{font-size:100px;} a{font-size:.5rem;} 如何使用 rem 进行布局？ 1.标签的 rem 单位的值怎么计算 通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面下面来举个例子， 当我们拿到的设计图是 750px 的时候， 窗口宽度 750px，html 的 font-size 的大小为 100px； 也就是说 1rem = 100px；所以标题的 font-size 的大小为 26/100=0.26rem； 2.如何实现兼容各种屏幕大小的设备 (); window.onresize = rem; </script>
1.7K30编辑于 2022-06-16 - 来自专栏h5学习笔记
rem适配布局
1、rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 实现元素动态大小变化 rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸， 媒体查询可以根据不同设备宽度来修改样式 媒体查询+ rem就可以实现不同设备宽度,实现页面元素大小的动态变化 为单位的值; 4.2 rem适配方案技术使用(市场主流) 技术方案1 rem 媒体查询 less 技术方案2 (推荐) flexible.js rem rem实际开发适配方案 是2rem * 2 rem比例是1比1 ⑧320屏幕下 ，html 字体大小为21.33，则2rem = 42.66px，此时宽和高都是42.66，但是宽和高的比例还是1比1 ⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果 rem值 = 页面元素值( px) / html font-size字体大小 rem适配方案2 简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询
2.3K30发布于 2020-09-30 - 来自专栏clz
rem适配布局
rem 适配布局 rem 单位 rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。 rem 作用于非根元素字体大小时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其初始字体的大小。 : (30 + 82 / 50rem) // 或 height: 30 + (82 / 50rem); font-size: 82 + 15px + 3rem; } 生成的CSS ; height: 82 / 50rem; font-size: 100px; } rem 适配方案 目标 让一些不能等比自适应的元素，当设备尺寸发生改变时,等比例适配当前设备。 1： less 媒体查询 rem 插件 easy less rem 适配方案 2： flexible.js rem 插件 cssrem 参考： pink 老师前端入门教程
1.9K30编辑于 2023-01-02 - 来自专栏编程之旅
Rem布局的原理探究
在用前端给移动端页面写布局时，我接触到了Rem布局，但是老实说我也看了几篇手淘适配的文章，并且主要的目的是拿到代码写出demo，所以对于Rem我还是停留在只会使用的阶段，但是理解的并不透彻，所以要抽出时间 ，把rem布局的原理搞清楚。 什么是Rem 看完了刚才em的介绍，是不是对于em的概念逐渐清晰，并且希望用em去构建自己的弹性布局呢。且慢，心急吃不了热豆腐，不妨听我把rem也慢慢的介绍完，毕竟主角光环的都是最后才出场的。 rem是css3引入的一个单位，那我们为什么要在有em这个可以充当弹性布局的单位时还要引入rem呢？ em可以让我们的页面更灵活，比起到处写死的px值，em显得更有张力，根据比例的变化来调节屏幕。 ，rem可能更适合写布局，而em可能就更适合来表达字体大小。
1.8K30发布于 2018-08-30 - 来自专栏前端学习笔记
移动web开发之rem布局
rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。 根html 为 12px */ html { font-size: 12px; } /* 此时 div 的字体大小就是 24px */ div { font-size: 2rem ; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
88251发布于 2020-10-26 - 来自专栏用户9378957的专栏
Rem布局的原理解析
我一直觉得em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系。 Rem布局原理 rem布局的本质是什么？ 其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊。 + 4.4+ 另外，在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的 font-size最大值，而轻松解决这个问题 Rem不是银弹 rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示 我认为一般内容型的网站，都不太适合使用rem，因为大屏用户可以自己选择是要更大字体，还是要更多内容，一旦使用了rem，就剥夺了用户的自由，比如百度知道，百度经验都没有使用rem布局；一些偏向app类的，
1.6K20编辑于 2022-07-08 - 来自专栏一个会写诗的程序员的博客
前端布局单位选择之 rem
前端布局单位选择之 rem Root em（REM）是CSS3中新定义的一种长度单位。和之前的em单位相比在使用上具有明显的优势。 进行布局的话建议用less去写，因为less中可以用变量，这样我们可以省去频繁用计算器的时间了。 less中我们可以这样写； @rem:40rem; 定义变量@rem 这里的40是指你打开谷歌开发者工具后点击移动端模拟时的html的font-size大小。 div{ width:200/@rem; } less会在编译的时候给计算出结果。
81910发布于 2018-08-17 - 来自专栏前端儿
细说移动端 经典的REM布局 与 新秀VW布局
使用 @media媒体查询来切换多个布局 4. 响应式布局 通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用 5. 弹性布局 通常指的是rem或em布局。 淘宝的 Flexible 让REM布局得以流行开来，而此Flexible实现也有一些不足，此外，也涌现出了多种实现REM布局的方案 比如直接使用 html{ font-size:625%; } 基准值 important; } } 但使用rem来布局的方案并不太正统，它有一些hack的特点 比较规范的方式是使用vw单位，随之而来的就是后起之秀 VW布局 花了一些时间整理了REM 五、REM + VW布局 讲的太乱了？自己去看代码 为了解决纯VW布局不能设置最大最小宽度的问题，我们引入REM。 纯VW布局不支持设置容器最大最小宽高，如果需要此功能则选用 REM + VW布局 ? 2. 食用方式 怎么使用呢？
12.6K42发布于 2018-10-09 - 来自专栏前端知否
移动端网页布局适配rem方案小结
前言 根据 W3C 规范中对 1rem 的定义： 1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时，rem 单位以该属性的初始值作参照。 0.75rem; //12÷16=0.75（rem） } 使用rem这个字体单位进行适配，就是利用它作为一个全局字体固定参照单位的特性。 如果改变html元素的字体大小，rem的值也就跟着改变，对应的其他使用rem的布局尺寸，也会跟着改变，从而达到适配的目的，保证比例一致。 rem适配具体实现方案： 设计稿尺寸宽度为750px，如果设计稿是640px，下边js会自动计算rem的值（比如rem:75px -> rem: 64px），具体的尺寸rem不用调整（例如 padding = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;
1.5K40发布于 2020-03-23 - 来自专栏编程社区
手机端页面自适应布局---rem
rem布局，在页面中引入这都js代码。 布局的核心代码，这段代码的意思是： 如果页面的宽度超过了640px，那么页面中html的font-size恒为100px。 此时1rem = 100px，那么上面的宽55px，高37px的元素样式就可以这么设置 ↓ width: 0.55rem;height: 0.37rem; 为什么不一开始把html的font-size设为 这样，页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了！ 3. 有哪些情况可是使用rem布局？ 大部分情况下都可以使用rem布局，当然具体情况还要看情况而定。 一般导航栏不用rem，而是用flex布局，这是因为导航栏点击最多，所以给他一个固定的大小（高度固定，宽度自适应）。
2.2K52编辑于 2022-01-27 - 来自专栏前端自习课
【CSS】872- 浅析rem布局方案
1px的粗细问题 由于1px的实际大小是一样的，只是里面的物理像素数量不同，所以如果直接写1px是没问题的，不会出现粗细不同的情况，但是这样一来retina的优势也rem的作用也就没了，其实还是dpr的问题 （虚拟视口），这个视口大小接近于pc，大部分都是980px visual viewport 有了布局视口，还缺一个承载它的真是视口，也就是移动设备的可视区域-视觉视口（物理视口）,这个尺寸随着设备的不同也有不同 这样在视觉视口中创建了一个布局视口，类似overscroll:scroll;这样，可以通过滚动拖拽、缩放扩大进行较好的访问体验 ideal viewport 像上面的体验在早些年可能比较多，但是近几年几乎很少了 ，还是归咎于用户体验，所以，我们还需要一个视口-理想视口（同样是虚拟视口），不过这个理想视口的大小是等于布局视口的，这样用户就能得到更好的浏览体验。 dpr},user-scalable=no` ); html.setAttribute('data-dpr', dpr); // 这样计算的好处是，你可以直接用ui的px/100得到的就是rem
1K20发布于 2021-02-26 - 来自专栏网络日志
rem响应式布局-自动将px转换为rem--px2rem插件的使用
当你在项目中采用rem做响应式页面的时候，如果代码里面写的是rem单位的话，会不好判断各种距离、宽高的具体数值，下面介绍一款插件：px2rem，使用此插件可以在代码里依然写px，启动项目会自动将 px单位转换为可响应的rem单位 第一步 installcnpm install postcss-px2rem px2rem-loader --save 第二步 在项目src目录下新建util文件夹（如已有请忽略 ），在util文件夹下新建rem.js文件，内容如下： // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem /util/rem' 第四步 在项目根目录新建vue.config.js文件（如已有请忽略），并在其中添加如下代码 // 引入等比适配插件 const px2rem = require('postcss-px2rem ') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件
2.2K10编辑于 2024-06-22 - 来自专栏前端知识分享
第130天：移动端-rem布局
一、关于布局方案 当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。 之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。 此时我们从图中若某个标注为100px，那么css中就应该设置为100/75 = 1.333333rem。所以为了提高开发效率，可以使用px转化为rem的插件。 如果你使用sublimeText，可以用 rem-unit ? 纵向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。
1.8K40发布于 2018-09-11 - 来自专栏刘悦的技术博客
rem在响应式布局中的应用
rem在响应式布局中的应用 最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。 这种方式最大的问题就是为了布局效果添加了一些冗余的dom元素。 使用rem的优点 刚开始是为了解决元素等比缩放的问题，才用上rem的，但是在试用过程中发现rem的响应式布局方案拥有以下一些优点。 1. 比百分比布局更具优势 百分比布局始终是相对父元素的，对于嵌套比较深的元素，大家是不是在计算百分比的时候异常头疼，稍不留神就弄错分母了，并且，嵌套过深也会影响精度。 而rem布局的分母只有一个就是视口宽度。妈妈再也不用担心我弄错分母了。 3.
2.6K40编辑于 2022-08-08 - 来自专栏全栈自学笔记
移动web开发之rem适配布局
移动web开发之rem适配布局 方案： 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局，那高度如何布局？ 1. rem基础 rem单位 rem(root em)是一个相对单位，类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 实现元素动态大小变化 rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸 媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化 为单位的值； 4.2 rem适配方案技术使用（市场主流） 技术方案一 less 媒体查询 rem 技术方案二（推荐） flexible.js rem 总结： 两种方案现在都存在 是2rem2rem 比例是1比1 320屏幕下，html字体大小为21.33 则2rem = 42.66px 此时宽和高都是42.66px 但是宽和高的比例还是1比1 但是已经能实现不同屏幕下
2.3K20发布于 2020-10-27 - 来自专栏全栈程序员必看
理解rem实现响应式布局原理及js动态计算rem「建议收藏」
前言 移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。 1、什么是rem rem是相对于根元素（html标签）的字体大小的单位。 2、rem实现适配的原理 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。 实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。 通过此方法，rem大小始终为width的n等分。 为width的1/10.即实现了百分比布局 4、tip： 1、以上代码需在dom之前写入（可放在head里面第一个script标签） 2、移动端加上meta标签<meta name="viewport 另外说明一点，此方法实现的功能也相对简单，只实现了最核心的动态修改<em>rem</em>的值。
8.8K11编辑于 2022-07-20 - 来自专栏睡不着所以学编程
移动web开发(5)之rem适配布局
虽然说子盒子为弹性容器的时候,虽然是没有行内元素和块级元素的区别了,但是当里面没有内容的时候,设置了大小也还是不生效的.案例自己做的时候发现也没那么麻烦啦,只是刚学习了新的知识点 , 所以写起来还是比较慢的. 01 rem 单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小.比如,根元素(html)设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px.也就是说rem这个单位之看html 实现元素动态大小变化 rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸,媒体查询可以根据不同设备宽度来修改样式,媒体查询+rem就可以实现不同设备宽度,实现页面元素大小的动态变化 ,使用媒体查询修改通过判断屏幕的大小改变html字体的大小 让文字垂直居中利用的是line-height,这里也可以 不定死,用rem单位,将line-height设置成height一样就可以. <
1.4K30编辑于 2022-09-20 - 来自专栏海仔技术驿站
前端成神之路-移动web开发_rem布局
移动web开发之rem布局 rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 ; } rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 技术方案： 1.less+rem+媒体查询 2.lflexible.js+rem 总结： 两种方案现在都存在。 方案2 更简单，现阶段大家无需了解里面的js代码。 是 2rem2rem 比例是1比1 ⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1 ⑨但是已经能实现不同屏幕下 ：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小 苏宁首页 苏宁首页地址 ：苏宁首页 1、 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取rem适配布局
1.3K21发布于 2020-12-01 - 来自专栏前端知识分享
第132天：移动web端-rem布局（进阶）
rem布局（进阶版） 该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport 在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！ 此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。 '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`; 34 }; 10.问：我在使用 rem 布局进阶方案的时候遇到了XXX的问题，如何解决？ 绝大多数你遇到的问题，都是由于对rem布局理解不到位导致的。
1.5K30发布于 2018-09-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号